<script setup lang="ts">
import { computed } from "vue";
import { htmlDecode } from "~/utils/";
import { CloseOutlined } from "@ant-design/icons-vue";

const props = defineProps({
	html: {
		type: String,
	},
	visible: {
		type: Boolean,
		default: false,
	},
});
const emits = defineEmits(["update:visible"]);

const isRawHtml = (html) => {
	return (
		/^<[a-z]+[\s\S]*><[a-z]+[\s\S]*>/.test(html) ||
		/^<[a-z]+[\s\W]style=/.test(html)
	);
};

// 转换html
const convertDoc = (contentData: string) => {
	let html = contentData;
	if (isRawHtml(html)) {
		return html;
	}
		const res = htmlDecode(html);
		return res;
};

const htmlContent = computed(() => {
	return convertDoc(props.html);
});

const handleClose = () => {
	emits("update:visible", false);
};
</script>

<template>
	<div class="html-preview-wrapper" v-if="props.visible">
		<div class="preview-mask"></div>
		<div class="preview-operation">
			<CloseOutlined class="icon" @click="handleClose" />
		</div>
		<div class="html-wrapper">
			<div class="html-content" v-html="htmlContent"></div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.html-preview-wrapper {
	z-index: 1080;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	outline: 0;
	-webkit-overflow-scrolling: touch;
	.html-wrapper {
		position: relative;
		z-index: 1081;
		width: 1240px;
		height: 1754px;
		background: url("~/assets/images/pdf_bg.png");
		padding: 130px 78px;
		margin: 56px auto;
		background-size: cover;
		overflow: hidden;
		.html-content {
			height: 100%;
			overflow-y: scroll;
		}
	}

	.preview-operation {
		position: fixed;
		z-index: 1082;
		width: 100%;
		height: 56px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.65);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 8px;
		.icon {
			font-size: 24px;
		}
	}

	.preview-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.65);
	}
}
</style>
